<template>
  <div style="height: 100vh;overflow: scroll">
    <!--头部搜索框-->
    <HomeHeader/>
    <!--轮播图-->
    <div style="margin-top: 50px">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img :src="image" width="100%"/>
        </van-swipe-item>
      </van-swipe>
    </div>

    <!--新闻咨询-->
    <div>
      <!--下拉刷新-->
      <van-pull-refresh
          v-model="isLoading"
          success-text="刷新成功"
          @refresh="onRefresh"
      >
        <!--<van-icon name="volume-o" />-->
        <van-notice-bar
            left-icon="smile-o"
            scrollable
            text="从来没有喝过星巴克(*。>Д<)o゜。"
        />
        <div class="function">
          <van-button plain type="primary" @click="coffeeBtn">请作者喝杯咖啡</van-button>
          <van-button plain type="danger" @click="hotBtn">热门推荐</van-button>
          <van-button plain type="warning" @click="guessBtn">猜你喜欢</van-button>
        </div>

      </van-pull-refresh>

    </div>
    <!--中间内容-->
    <div class="middle">
      更多功能，敬请期待。。。
    </div>
    <!--底部-->
    <Footer/>

    <!--热门弹出框-->
    <van-dialog
        v-model="hotFlag"
        title="热门院校推荐"
        show-cancel-button
        :cancel-button-text="hotCancelTitle"
        @cancel="handleCancel"
    >
      <van-cell-group inset>
        <van-cell title="院校" value="热度"/>
        <van-cell
            v-for="item in hotUniversity"
            :key="item.id"
            :title="item.name"
            :value="item.score"
            :to="{
              name:'UniDetail',
              params:{
                  status:0,
                  uniId:1,
                  uniName:item.name
              }
            }"

        />
      </van-cell-group>
    </van-dialog>

    <!--猜你喜欢弹出框-->
    <van-dialog
        v-model="guessFlag"
        title="猜你喜欢"
        show-cancel-button
        cancel-button-text="取消"
    >
      <van-cell-group inset>
        <van-cell title="院校" value="类型"/>
        <van-cell
            v-for="item in simUniversityList"
            :key="item.id"
            :title="item.name"
            :value="item.level"
            :to="{
              name:'UniDetail',
              params:{
                  status:0,
                  uniId:1,
                  uniName:item.name
              }
            }"

        />
      </van-cell-group>
    </van-dialog>
  </div>
</template>

<script>
import HomeHeader from "@/components/HomeHeader";
import {Dialog, ImagePreview} from 'vant';
import Footer from "@/components/Footer";

export default {
  name: "Home",
  components: {Footer, HomeHeader},
  data() {
    return {
      isLoading: false,
      images: [
        'https://s1.ax1x.com/2022/10/27/xfLhPU.jpg',
        'https://s1.ax1x.com/2022/10/27/xfXO3D.jpg',
        'https://s1.ax1x.com/2022/10/27/xfOFdP.jpg'
      ],
      hotUniversity: this.$store.state.hotUniversity,
      hotFlag: false,
      hotCancelTitle: '下次不弹出',
      guessFlag: false,
      simUniversityList: []
    }
  },
  methods: {
    //猜你喜欢按钮
    guessBtn() {
      const user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : null
      if(!user){
        this.$notify({
          type:'warning',
          message:'请登录查看'
        })
        return
      }
      this.request.get('/api/index/revUniversityByBrowser', {
        params: {
          userId: user.id
        }
      }).then(res => {
        if (res.code === 1) {
          if (res.data) {
            this.simUniversityList = res.data
            this.guessFlag = true
          } else {
            Dialog.alert({
              title: '猜你喜欢',
              message: '抱歉，请您先浏览院校库和专业库或者做写MBTI测试',
            }).then(() => {
              // on close
            });
          }
        }
      })
    },
    //热门推荐按钮
    hotBtn() {
      this.hotUniversity = this.$store.state.hotUniversity
      this.hotFlag = true
      this.hotCancelTitle = '取消'
    },
    //弹出框取消按钮
    handleCancel() {
      //下次不再弹出弹出框
      this.$store.commit('HANDLEHOTFLAG')
    },
    coffeeBtn() {
      ImagePreview({
        images: [
          'https://liaowei2002.oss-cn-chengdu.aliyuncs.com/img/weipay.jpg',
          'https://liaowei2002.oss-cn-chengdu.aliyuncs.com/img/zhifubaopay.jpg'
        ],
        swipeDuration: 500
      });
    },
    onRefresh() {
      this.isLoading = false;
    }
  },
  created() {
    //请求热门数据
    this.request.get('/api/index/hotUniversity').then(res => {
      if (res.code === 1) {
        this.$store.commit('SAVEHOTUNIVERSITY', res.data)
      }
    })
  },
  mounted() {
    setTimeout(() => {
      this.hotFlag = this.$store.state.hotFlag
      this.hotUniversity = this.$store.state.hotUniversity
    }, 2500)
  }

}
</script>

<style scoped>
.middle {
  margin-left: 15px;
  margin-top: 180px;
  color: #666;
}

button {
  margin-top: 10px;
}

.function {
  display: flex;
  align-items: center;
  flex-flow: wrap;
  justify-content: space-around;
}
</style>